<!--
 * @FileDescription 坐标系标定提示
 * @Author 杨宇翔
 * @Date 20220630 19:03:34
 * @LastEditors 杨宇翔
 * @LastEditTime 20220630 19:03:34
-->
<template>
    <div>
        <span>
            {{ label }}
        </span>
        <span @click="OnRecordAsync">{{ text }}</span>
    </div>
</template>

<script setup lang="ts">
import { ClientMessage } from "@runtime/generate/message/ClientMessage";
import TimerComponent from "@runtime/module/Timer/TimerComponent";
import { computed, onMounted, ref } from "vue";
import { CalibrationComponent } from "./InertialNavigationComponent";

interface Props {
    Information: ClientMessage.TooltipInformation;
}

const props = defineProps<Props>();

const label = computed(() => {
    const [name, size] = props.Information.Text.split(':');
    const value = Math.round(Number.parseFloat(size) * Math.pow(10, 2)) / Math.pow(10, 2);
    return `${CalibrationComponent.Default.Config.value.Descriptions.get(name)}${value}`;
});

const text = ref('记录');

async function OnRecordAsync(): Promise<void> {
    if (text.value == '已记录') {
        return;
    }

    text.value = '已记录';

    const [name, size] = props.Information.Text.split(':');
    const value = Math.round(Number.parseFloat(size) * Math.pow(10, 2)) / Math.pow(10, 2);
    CalibrationComponent.Default.Config.value.Records.set(name, value);

    await TimerComponent.Default.WaitAsync(1000);
    text.value = '记录';
}

const left = computed(() => `${props.Information.ViewportPointX}%`);
const top = computed(() => `calc(${props.Information.ViewportPointY}% - 1rem - 3rem)`);
onMounted(() => {
    console.log('################',props);
})
</script>

<style scoped>
div {
    position: absolute;
    left: v-bind(left);
    top: v-bind(top);

    transform: translate(-50%, -40%);

    border-radius: 0.5rem;
    background-color: rgba(54, 56, 75, 0.75);

    color: white;
    font-size: 1.8rem;
    text-align: center;
    white-space: nowrap;

    height: 4rem;

    display: flex;
    justify-content: stretch;
    align-items: stretch;
}

div::after {
    content: '';

    position: absolute;
    left: 50%;
    top: 100%;

    transform: translateX(-50%);

    border-top: solid 1rem rgba(54, 56, 75, 0.75);
    border-left: solid 1rem transparent;
    border-right: solid 1rem transparent;
    border-bottom: solid 1rem transparent;
}

div>span {
    height: 100%;
    line-height: 4rem;
}

div>span:first-of-type {
    padding-left: 2rem;
    padding-right: 2rem;
}

div>span:last-of-type {
    color: white;
    width: 8rem;
    border-radius: 0.6rem;
    background: linear-gradient(180deg, #807DE1 0%, #218CDE 100%);
}
</style>